<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>编码生成器</title>
<style>
body {
    font-family: "Microsoft Yahei", sans-serif;
    margin: 20px;
    background: #f2f2f2;
    font-size: 16px; /* Increased base font size */
}

h1 {
    font-size: 26px;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

form {
    background: #fff;
    padding: 20px 30px;
    border-radius: 5px;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

label {
    display: inline-block;
    width: 200px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #555;
}

select, input[type="checkbox"] {
    font-size: 14px;
    padding: 4px;
    margin-bottom: 10px;
}

button {
    font-size: 18px; /* Increased font size for better readability */
    background: #4CAF50;
    color: #fff;
    border: none;
    padding: 15px 30px; /* Increased padding for larger buttons */
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
}
button:hover {
    background: #45a049;
}

.result {
    margin-top: 20px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    background: #e9f5e9;
    padding: 15px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.footer {
    text-align: center;
    color: #999;
    margin-top: 30px;
    font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>管路接头编码生成器V1</h1>
<form method="post">
    <label for="joint_type">接头类型:</label>
    <select name="joint_type" id="joint_type">
    {% for val, txt in joint_types %}
        <option value="{{ val }}" {% if selected.joint_type == val %}selected{% endif %}>{{ txt }}</option>
    {% endfor %}
    </select><br/>

    <label for="bend_type">弯头角度:</label>
    <select name="bend_type" id="bend_type">
    {% for val, txt in bend_types %}
        <option value="{{ val }}" {% if selected.bend_type == val %}selected{% endif %}>{{ txt }}</option>
    {% endfor %}
    </select><br/>

    <label for="thread_type_left">左端螺纹类型:</label>
    <select name="thread_type_left" id="thread_type_left">
    {% for val, txt in thread_types %}
        <option value="{{ val }}" {% if selected.thread_type_left == val %}selected{% endif %}>{{ txt }}</option>
    {% endfor %}
    </select><br/>

    <label for="thread_size_left">左端螺纹尺寸:</label>
    <select name="thread_size_left" id="thread_size_left">
    </select><br/>

    <label for="thread_type_right">右端螺纹类型:</label>
    <select name="thread_type_right" id="thread_type_right">
    {% for val, txt in thread_types %}
        <option value="{{ val }}" {% if selected.thread_type_right == val %}selected{% endif %}>{{ txt }}</option>
    {% endfor %}
    </select><br/>

    <label for="thread_size_right">右端螺纹尺寸:</label>
    <select name="thread_size_right" id="thread_size_right">
    </select><br/>

    <label for="material_type">材质:</label>
    <select name="material_type" id="material_type">
    {% for val, txt in material_types %}
        <option value="{{ val }}" {% if selected.material_type == val %}selected{% endif %}>{{ txt }}</option>
    {% endfor %}
    </select><br/>

    <label for="o_ring">是否有O型圈:</label>
    <input type="checkbox" name="o_ring" id="o_ring" value="OR" {% if selected.o_ring == 'OR' %}checked{% endif %}/><br/>

    <button type="submit">生成编码</button>
</form>

{% if result %}
<div class="result">
    生成结果: {{ result }}
</div>
{% endif %}

<div class="footer">2024 成都固佰特科技有限公司</div>
</div>

<script>
function loadSizes(selectIdType, selectIdSize, selectedValue) {
    var threadType = document.getElementById(selectIdType).value;
    var sizes = {
        "A": {{ thread_size_map["A"]|tojson }},
        "B": {{ thread_size_map["B"]|tojson }},
        "N": {{ thread_size_map["N"]|tojson }},
        "J": {{ thread_size_map["J"]|tojson }},
        "F": {{ thread_size_map["F"]|tojson }},
        "P": {{ thread_size_map["P"]|tojson }},
        "G": {{ thread_size_map["G"]|tojson }}
    };
    var sizeSelect = document.getElementById(selectIdSize);
    sizeSelect.innerHTML = "";
    sizes[threadType].forEach(function(item){
        var opt = document.createElement('option');
        opt.value = item[0];
        opt.textContent = item[0] + ": " + item[1];
        if(item[0] === selectedValue) {
            opt.selected = true;
        }
        sizeSelect.appendChild(opt);
    });
}

window.onload = function(){
    loadSizes('thread_type_left','thread_size_left', "{{selected.thread_size_left}}");
    loadSizes('thread_type_right','thread_size_right', "{{selected.thread_size_right}}");

    document.getElementById('thread_type_left').addEventListener('change', function(){
        loadSizes('thread_type_left','thread_size_left', "");
    });
    document.getElementById('thread_type_right').addEventListener('change', function(){
        loadSizes('thread_type_right','thread_size_right', "");
    });
};
</script>

</body>
</html>
